<!--
 * @Author: 杨超
 * @Date: 2021-08-05 11:14:55
 * @LastEditTime: 2021-12-07 10:58:03
 * @LastEditors: 杨超
 * @Description:
-->
<template>
    <el-select v-model="roadCode" v-bind="$attrs" style="width: 100%" :placeholder="placeholder" @change="change">
        <el-option v-for="item in roadOptions" :key="item.code" :label="item.des" :value="isLabel ? item.name : item.code" />
    </el-select>
</template>

<script>
import { LineHighwayModel } from '@/models'

export default {
    name: 'RoadSelect',
    props: {
        value: {
            type: [Number, String],
            default: null
        },
        placeholder: {
            type: String,
            default: '请选择'
        },
        isLabel: {
            type: Boolean,
            default: false
        },
        defaultFirst: {
            type: Boolean,
            default: false
        }
    },
    data() {
        return {
            model: new LineHighwayModel(),
            roadCode: this.value,
            roadOptions: []
        }
    },
    watch: {
        value(newValue) {
            console.log(newValue + 'A')
            // 如果重置为空值时，需要第一个默认值，重新赋值
            if (!newValue) {
                if (this.defaultFirst) {
                    this.setFirstValue()
                    return
                }
            }
            this.roadCode = newValue
            const currentRoad = (this.roadOptions.find(item => item.code === this.roadCode)) || {}
            this.$emit('update:stake', currentRoad.roadStake)
            this.$emit('update:name', currentRoad.name)
        }
    },
    created() {
        this.getList()
    },
    methods: {
        change(val) {
            this.$emit('update:value', val)
            const value = this.isLabel ? 'name' : 'code'
            const currentRoad = this.roadOptions.find(item => item[value] === val) || {}
            this.$emit('update:name', currentRoad.name)
            // 桩号范围
            this.$emit('update:stake', currentRoad.roadStake)
            this.$emit('change', val, this.roadOptions)
        },
        getList() {
            this.model.getList({}, { pageSize: 1000 }).then(res => {
                this.roadOptions = res.list.map(item => {
                    return {
                        code: item.code,
                        name: item.name,
                        des: `${item.name}（${item.code}）`,
                        totalLength: item.highwayLength,
                        orgId: item.monitoringCenterId,
                        orgDept: item.monitoringCenterName,
                        managementName: item.managementName,
                        managementId: item.managementId,
                        roadStake: `${item.startingPointStake}~${item.terminalPointStake}`
                    }
                })
                if (this.roadCode) {
                    const currentRoad = this.roadOptions.find(item => item.code === this.roadCode)
                    this.$emit('update:stake', currentRoad.roadStake)
                    this.$emit('update:name', currentRoad.name)
                    console.log(currentRoad.roadStake)
                }
                this.defaultFirst && this.setFirstValue()
            })
        },
        setFirstValue() {
            // 个别页面需要把公路第一个作为默认值
            const value = this.isLabel ? this.roadOptions[0].name : this.roadOptions[0].code
            this.change(value)
        }
    }
}
</script>

<style lang="scss" scoped></style>
